<mat-dialog-content class="task-manager-dialog-content">
    <span class="task-manager-search">
        <mat-icon>search</mat-icon>
        <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{'Filter' | translate}}"
                ix-auto ix-auto-type="input" ix-auto-identifier="tm-filter">
        </mat-form-field>
    </span>

    <mat-table #taskTable [dataSource]="dataSource" multiTemplateDataRows matSort>
        <ng-container matColumnDef="state">
            <mat-header-cell *matHeaderCellDef mat-sort-header fxFlex="74px"
                ix-auto ix-auto-type="tab" ix-auto-identifier="State"> {{ 'State' | translate }} </mat-header-cell>
            <mat-cell *matCellDef="let element" fxFlex="74px">
                <mat-icon *ngIf="element.state == 'SUCCESS'" class="state-success">check_circle_outline</mat-icon>
                <mat-icon *ngIf="element.state == 'FAILED'" class="state-failed">highlight_off</mat-icon>
                <mat-icon *ngIf="element.state == 'RUNNING'" class="state-running">cached</mat-icon>
                <mat-icon *ngIf="element.state == 'WAITING'" class="state-waiting">schedule</mat-icon>
                <mat-icon *ngIf="element.state == 'ABORTED'" class="state-aborted">report</mat-icon>
            </mat-cell>
        </ng-container>
        <ng-container matColumnDef="method">
            <mat-header-cell *matHeaderCellDef mat-sort-header
                ix-auto ix-auto-type="tab" ix-auto-identifier="Method"> {{ 'Method' | translate }} </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.method}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="percent" class="task-manager-percent">
            <mat-header-cell *matHeaderCellDef mat-sort-header
                ix-auto ix-auto-type="tab" ix-auto-identifier="Progress"> {{ 'Progress' | translate }} </mat-header-cell>
            <mat-cell *matCellDef="let element">
                <span> {{element.progress.percent || 0 | number: '1.2-2'}}% </span>
                <mat-progress-bar [mode]="element.state == 'RUNNING' ? 'buffer' : 'determinate'" [value]="element.progress.percent"></mat-progress-bar>
            </mat-cell>
        </ng-container>

        <!-- expanded row -->
        <ng-container matColumnDef="expandedDetail">
            <mat-cell *matCellDef="let element">
                <span><b>{{ 'Status:' | translate}}</b> {{element.state}}</span>
                <span *ngIf="element.time_started != null"><b>{{ 'Start Time:' | translate }}</b> {{getReadableDate(element.time_started)}}</span>
                <span *ngIf="element.time_finished != null"><b>{{ 'Finished Time:' | translate }}</b> {{getReadableDate(element.time_finished)}}</span>
                <span *ngIf="element.error != null"><b>{{ 'Error:' | translate }}</b> {{element.error}}</span>
                <span *ngIf="element.logs_excerpt != null && element.logs_excerpt != '' && element.logs_path != null"><button mat-flat-button color="primary" (click)="showLogs(element)">{{ 'View Logs' | translate }}</button></span>
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;" class="element-row" [class.expanded]="expandedElement == row"
            (click)="expandedElement = expandedElement === row ? null : row" ix-auto ix-auto-type="expander" ix-auto-identifier="{{row.method}}"></mat-row>
        <mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row" [@detailExpand]="row == expandedElement ? 'expanded' : 'collapsed'"></mat-row>
    </mat-table>
</mat-dialog-content>
<mat-dialog-actions align="end">
    <button mat-button mat-dialog-close class="task-manager-action-button"
        ix-auto ix-auto-type="button" ix-auto-identifier="CLOSE"> {{ 'Close' | translate }}</button>
</mat-dialog-actions>